import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpRequest } from "../../../../service/httpRequest";
import { NotiService } from "../../../../service/noti.service";

declare let $:any;
@Component({
  selector: 'app-single-monitor-united1',
  templateUrl: './single-monitor-united1.component.html',
  styleUrls: ['./single-monitor-united1.component.css']
})
export class SingleMonitorUnited1Component implements OnInit {
  deviceId:string = '';
  chart1:any;
  chart2:any;
  chart3:any;
  private gizwitsNotiWs:any;
  private eventType = ['device.status.kv'];

  constructor(private activeRoute:ActivatedRoute,private noti:NotiService) { }

  ngOnInit() {
    this.activeRoute.params.subscribe(
      params=>{
        this.deviceId = params['deviceId'].replace('|','/');

        let p = this.deviceId.split('/');
        this.gizwitsNotiWs = this.noti.init(p[0].toLocaleLowerCase(),[p[1]],this.eventType,this.onEvent,this);
        this.gizwitsNotiWs.connect();
        this.initChart();
      }
    );

  }

  change(i){
    let cboxs = $('.xx-box');
    if(i >= cboxs.length) return ;
    $.each(cboxs,function(j,n){
      $(n).hide();
      $('.nav-title').eq(j).removeClass('active')
    });
    $('.xx-box').eq(i).show();
    $('.nav-title').eq(i).addClass('active');
  }




  initChart(){
    var plotBands = [
      {from: 0.00, to: 0.80, color: '#55BF3B' },
      { from: 0.80,to: 1.50,color: '#DDDF0D'},
      {from: 1.50,to: 2.00,color: '#DF5353'}];
    this.init('angular-gauge1','排气压力',-150,150,0.00,2.00,'压力',0.00,'Mpa',plotBands,(chart)=>{
      this.chart1 = chart;
    });

    plotBands = [
      {from: -20, to: 60, color: '#55BF3B' },
      { from: 60,to:100 ,color: '#DDDF0D'},
      {from:100,to: 150,color: '#DF5353'}];
    this.init('angular-gauge2','排气温度',-150,150,-20,150,'温度',0.0,'℃',plotBands,(chart)=>{
      this.chart2 = chart;
    });

    plotBands = [
      {from: 0, to: 350, color: '#55BF3B' },
      { from: 350,to: 700,color: '#DDDF0D'},
      {from: 700,to:1000,color: '#DF5353'}];
    this.init('angular-gauge3','主机A项电流',-150,150,0,1000,'电流',0.0,'A',plotBands,(chart)=>{
      this.chart3 = chart;
    });
  }


  onEvent(msgs,that){
    let did = msgs.did;
    let msg = msgs.data;
    console.log(msgs)
    let a = msg.Exhaustpress.toFixed(1);
    that.updatechart(that.chart1,parseFloat(a));

    let b = msg.Exhausttemp.toFixed(1);
    that.updatechart(that.chart2,parseFloat(b));

    let c = msg.Acurrent.toFixed(1);
    that.updatechart(that.chart3,parseFloat(c));

    for(var key in msg){
      $("#"+key).text(msg[key]);

      if(key=="ScrewMachine_State_12" && msg[key]=="0"){
        $("#ScrewMachine_State_12").text('停止');
        $("#ScrewMachine_State_121").removeClass("blue");
        $("#ScrewMachine_State_121").addClass("gray");

      }
      if(key=="ScrewMachine_State_12" && msg[key]=="1"){
        $("#ScrewMachine_State_12").text('运行');
        $("#ScrewMachine_State_121").removeClass("gray");
        $("#ScrewMachine_State_121").addClass("blue");
      }
      if(key=="ScrewMachine_State_11" && msg[key]=="0"){
        $("#ScrewMachine_State_11").text('卸载');
        $("#ScrewMachine_State_111").removeClass("blue");
        $("#ScrewMachine_State_111").addClass("gray");

      }
      if(key=="ScrewMachine_State_11" && msg[key]=="1"){
        $("#ScrewMachine_State_11").text('加载');
        $("#ScrewMachine_State_111").removeClass("gray");
        $("#ScrewMachine_State_111").addClass("blue");

      }
      for(var i=13;i<20;i++){
        var key1 = "ScrewMachine_State_" + i;
        if(key == key1 && msg[key]=="1"){
          $("#"+key).text("");
          $("#"+key).removeClass("gray");
          $("#"+key).addClass("red");
        }
        if(key == key1 && msg[key]=="0"){
          $("#"+key).text("");
          $("#"+key).removeClass("red");
          $("#"+key).addClass("gray");
        }
      }

      for( var l = 20;l<24;l++){
        var key4 = "ScrewMachine_State_" + l;
        if(key ==key4 && msg[key]=="1"){
          $("#"+key).text("");
          $("#"+key).removeClass("gray");
          $("#"+key).addClass("blue");
        }
        if(key ==key4 && msg[key]=="0"){
          $("#"+key).text("");
          $("#"+key).removeClass("blue");
          $("#"+key).addClass("gray");
        }
      }

      for(var j=29;j<33;j++){
        var key2 = "ScrewMachine_State_" + j;
        if(key == key2 && msg[key]=="1"){
          $("#"+key).text("");
          $("#"+key).removeClass("gray");
          $("#"+key).addClass("red");
        }
        if(key == key2 && msg[key]=="0"){
          $("#"+key).text("");
          $("#"+key).removeClass("red");
          $("#"+key).addClass("gray");
        }
      }



      for(var m=24;m<29;m++){
        var key3 = "ScrewMachine_State_" + m;
        if(key == key3 && msg[key]=="1"){
          $("#"+key).text("");
          $("#"+key).removeClass("gray-box");
          $("#"+key).addClass("orange-box");
        }
        if(key == key3 && msg[key]=="0"){
          $("#"+key).text("");
          $("#"+key).removeClass("orange-box");
          $("#"+key).addClass("gray-box");
        }
      }
    }

  }

  updatechart(chart,data){
    if (!chart.renderer.forExport) {
      let point = chart.series[0].points[0];
      point.update(data);
    }
  }

  init(id,text,startAg,endAg,min,max,name,initVal,subfix,pb,cb){
    $('#' + id).highcharts({

        chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false
        },
        title:{
          text: ''

        },
        pane: {
          startAngle: startAg,
          endAngle: endAg,
          background: [{
            backgroundColor: {
              linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
              stops: [
                [0, '#FFF'],
                [1, '#333']
              ]
            },
            borderWidth: 0,
            outerRadius: '109%'
          }, {
            backgroundColor: {
              linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
              stops: [
                [0, '#333'],
                [1, '#FFF']
              ]
            },
            borderWidth: 1,
            outerRadius: '107%'
          }, {

          }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
          }]
        },

        yAxis: {
          min: min,
          max: max,
          minorTickInterval: 'auto',
          minorTickWidth: 1,
          minorTickLength: 10,
          minorTickPosition: 'inside',
          minorTickColor: '#666',
          tickPixelInterval: 30,
          tickWidth: 2,
          tickPosition: 'inside',
          tickLength: 10,
          tickColor: '#666',
          labels: {
            step: 2,
            rotation: 'auto'
          },
          title: {
            text: subfix
          },
          plotBands: pb
        },

        series: [{
          name: name,
          data: [initVal],
          tooltip: {
            valueSuffix: ' '+ subfix +' '
          }
        }]

      },
      function (chart) {
        cb(chart);
      });
  }


}
